<template>
  <div class="search-box">
    <el-autocomplete
        v-model="keyword"
        :fetch-suggestions="querySearch"
        placeholder="请输入电子围栏的圆心位置（小区/养老院等）"
        style="width:260px"
        @select="handleSelect"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { searchPoi } from '@/api/fence'

const keyword = ref('')
const emit = defineEmits(['select'])

const querySearch = async (queryString, cb) => {
  if (!queryString.trim()) return cb([])
  const { data } = await searchPoi({ keyword: queryString, city: '北京' }) // 城市可动态
  const list = (data.results || []).map(r => ({
    value: r.name,
    address: r.address,
    point: r.location // {lng, lat}
  }))
  cb(list)
}

const handleSelect = (item) => {
  emit('select', item.point) // 把坐标抛给父组件
}
</script>

<style scoped>
.search-box {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 999;
}
</style>